<template>
  <div class="main" style="min-width: 1280px;">
    <div class="main-search-body">
      <div :style="{ width: '100%' }" style="border-radius: 10px;background-color: #ffffff">

        <a-space direction="vertical" size="large" style="width: 100%;margin-right: 10px;border-radius: 20px;">
          <a-input-search :style="{width:'60%'}"
                          style="height: 45px;margin-top: 15px;margin-left: 20%;border-radius: 20px;"
                          placeholder="搜索职位、公司" allow-clear
                          v-model="searchParam.keyword" @search="loadData">
            <!--        输入框前缀-地图-->
            <template #prefix>
              <a-button type="primary" size="large" style="height: 100%;width: 100px;border-radius:0 50px 0 50px;">
                <el-icon>
                  <LocationFilled/>
                </el-icon>
                全国
              </a-button>
            </template>
          </a-input-search>
        </a-space>

        <p class="p-top" style="margin-left: 40px;
        ">城市和区域</p>

        <div class="information" style="margin-top: 10px;">
<!--          &lt;!&ndash;          用v-if选出前13个最多点击量的城市&ndash;&gt;-->
<!--          <a-button type="text" style="margin-right: 15px;font-size: 14px" :value="searchParam.recruitmentCity" v-for="city in cities" @click="buttonclick">-->
<!--            {{ city }}</a-button>-->
          <span>区域选择：
          <a-radio-group default-value="0" v-model="searchParam.recruitmentCity">

            <template v-for="city in cities" :key="city">
              <a-radio :value="city">
                <template #radio="{ checked }">
                  <a-space
                      align="start"
                      class="custom-radio-card"
                      :class="{ 'custom-radio-card-checked': checked }"
                  >
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"/>
                    </div>
                    <div>
                      <div className="custom-radio-card-title">
                        {{ city }}
                      </div>
                    </div>
                  </a-space>
                </template>
              </a-radio>
            </template>
          </a-radio-group>
          </span>
        </div>
        <div class="information">
          <span>实习月份：
            <a-radio-group default-value="0" v-model="searchParam.internshipMonthDuration">
<!--               <a-radio value="null">-->
              <!--                      <template #radio="{ checked }">-->
              <!--                        <a-space-->
              <!--                            align="start"-->
              <!--                            class="custom-radio-card"-->
              <!--                            :class="{ 'custom-radio-card-checked': checked }"-->
              <!--                        >-->
              <!--                          <div className="custom-radio-card-mask">-->
              <!--                            <div className="custom-radio-card-mask-dot"/>-->
              <!--                          </div>-->
              <!--                          <div>-->
              <!--                            <div className="custom-radio-card-title">-->
              <!--                              不限-->
              <!--                            </div>-->
              <!--                          </div>-->
              <!--                        </a-space>-->
              <!--                      </template>-->
              <!--               </a-radio>-->

                  <template v-for="item in month" :key="item">
                    <a-radio :value="item.value" @change="handleChangeInternshipMonthDuration">
                      <template #radio="{ checked }">
                        <a-space
                            align="start"
                            class="custom-radio-card"
                            :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"/>
                          </div>
                          <div>
                            <div className="custom-radio-card-title">
                              {{ item.name }}
                            </div>
                          </div>
                        </a-space>
                      </template>
                    </a-radio>
                  </template>
                </a-radio-group>
          </span>
          <span>每周几天：
            <a-radio-group default-value="0" v-model="searchParam.weekDay">
                  <template v-for="item in weekOfDay" :key="item">
                    <a-radio :value="item.value">
                      <template #radio="{ checked }">
                        <a-space
                            align="start"
                            class="custom-radio-card"
                            :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"/>
                          </div>
                          <div>
                            <div className="custom-radio-card-title">
                              {{ item.name }}
                            </div>
                          </div>
                        </a-space>
                      </template>
                    </a-radio>
                  </template>
                </a-radio-group>
          </span>
          <span>学历要求：
            <a-radio-group default-value="0" v-model="searchParam.educationalRequirements">
<!--               <a-radio value="null">-->
              <!--                      <template #radio="{ checked }">-->
              <!--                        <a-space-->
              <!--                            align="start"-->
              <!--                            class="custom-radio-card"-->
              <!--                            :class="{ 'custom-radio-card-checked': checked }"-->
              <!--                        >-->
              <!--                          <div className="custom-radio-card-mask">-->
              <!--                            <div className="custom-radio-card-mask-dot"/>-->
              <!--                          </div>-->
              <!--                          <div>-->
              <!--                            <div className="custom-radio-card-title">-->
              <!--                              不限-->
              <!--                            </div>-->
              <!--                          </div>-->
              <!--                        </a-space>-->
              <!--                      </template>-->
              <!--                    </a-radio>-->

                  <template v-for="item in education" :key="item">
                    <a-radio :value="item.value">
                      <template #radio="{ checked }">
                        <a-space
                            align="start"
                            class="custom-radio-card"
                            :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"/>
                          </div>
                          <div>
                            <div className="custom-radio-card-title">
                              {{ item.name }}
                            </div>
                          </div>
                        </a-space>
                      </template>
                    </a-radio>
                  </template>
                </a-radio-group>
          </span>
          <span>转正机会：
            <a-radio-group default-value="0" v-model="searchParam.employmentOpportunities">

                  <template v-for="item in turnOK" :key="item">
                    <a-radio :value="item.value">
                      <template #radio="{ checked }">
                        <a-space
                            align="start"
                            class="custom-radio-card"
                            :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"/>
                          </div>
                          <div>
                            <div className="custom-radio-card-title">
                              {{ item.name }}
                            </div>
                          </div>
                        </a-space>
                      </template>
                    </a-radio>
                  </template>
                </a-radio-group>
          </span>
          <span>企业筛选：
            <a-radio-group default-value="0" v-model="searchParam.corporateLevel">

                  <template v-for="item in company" :key="item">
                    <a-radio :value="item.value">
                      <template #radio="{ checked }">
                        <a-space
                            align="start"
                            class="custom-radio-card"
                            :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"/>
                          </div>
                          <div>
                            <div className="custom-radio-card-title">
                              {{ item.name }}
                            </div>
                          </div>
                        </a-space>
                      </template>
                    </a-radio>
                  </template>
                </a-radio-group>
          </span>
          <span style="float: right;margin-right: 20px;">
            <a-button type="primary" @click="clearSelect"
                      style="border-radius: 10px;padding: 10px;"
            >清空所有选项</a-button>
          </span>
        </div>

      </div>

      <div class="left-div" :style="{ width: '70%' }" style="display: inline-block;vertical-align: top;">
        <div class="card-demo" @click="goToJobDetail(item.id)" v-for="item in items"
             style="border-radius: 10px;background-color: #ffffff;position: relative;">

          <div class="card-demo-title">
          <span class="card-demo-title-big">
            {{ item.titleName }}
          </span>

            <span>
            {{ item.welfare }}
          </span>

          </div>

          <div class="card-demo-left">
            <div class="card-demo-content">
              <p class="card-demo-title-money">{{ item.salary }}</p>
              <p class="card-demo-title-year">{{ item.employmentOpportunities }}</p>
              <p class="card-demo-title-school">{{ item.educationalRequirements }}</p>

            </div>
            <div class="card-demo-content2">
              <p class="card-demo-title-detail">{{ item.jobDetail }}</p>
            </div>
          </div>

          <div class="card-demo-right">
            <div class="card-demo-right-img" style="display: inline-block;">
              <img :src="item.coverPhoto" style="width: 75px;height:75px;border: 1px solid rgba(112,112,112,0.29)">
            </div>
            <p style="position:absolute;display: inline-block;
            top: 5px;left:115px;font-size: 17px;background-color: rgba(255, 255, 255, 0);">
              {{ item.corporateName }}</p>
            <br>
            <p class="little-back"
               style="position:absolute;display: inline-block;top: 45px;left:105px;font-size: 10px;">
              {{ item.corporateLevel }}</p>

            <p class="little-back"
               style="position:absolute;display: inline-block;top: 45px;left:175px;font-size: 10px;">{{ item.companySize }}</p>
          </div>

          <a-divider/>
        </div>
      </div>

      <!-- 右边推荐栏      -->
      <div class="right-div" :style="{ width: '28%' }" style="display: inline-block;
      height: 500px;vertical-align: top;">
        <div class="right-div-little"
             style="background: linear-gradient(45deg, #ebdeff, #eeeefa);">
          <div>
            <a-button type="primary" class="right-div-little-button" @click="goTo('/Resume')">上传附件简历</a-button>
          </div>
          <a-button type="primary" class="right-div-little-button">简历模板</a-button>
        </div>
        <div class="right-div-small">
          <img src="../../assets/img/Index/advertise.jpg" style="width: 300px">
        </div>
        <div class="right-div-big">
          <img src="../../assets/img/Index/HB1.png" style="width: 300px">
        </div>
        <div class="right-div-big">
          <img src="../../assets/img/Index/HB2.png" style="width: 300px">
        </div>
        <div class="right-div-big">
          <img src="../../assets/img/Index/HB3.png" style="width: 300px">
        </div>
      </div>

    </div>
    <div style="margin:30px;margin-left: 400px;">
      <a-pagination @change="handleChange"
                    :total="total" :current="currentPage" :page-size="pageSize" show-total/>
    </div>
  </div>

</template>

<script setup>
import {onMounted, ref, watchEffect} from "vue";
import {useRouter} from 'vue-router'
import axios from "axios";
import {message} from "ant-design-vue";
import qs from "qs";
import {ElMessage} from "element-plus";

const user = ref(getUser());
//路由
const router = useRouter();

const goTo = (path) => {
  if(user.value == null){
    ElMessage.warning("请先注册登录！");
  }else if(user.value.identityId=='20'){
    //如果是hr进行收藏，提示无法收藏
    ElMessage.warning("请将状态切换为‘求职者’");
  }
    else{
    router.push(path);
  }
};

// 跳转至详情页
const toDetail = (id) => {
  if(user.value == null){
    ElMessage.warning("请先注册登录！");
  }else{
    router.push({name: 'JobDetail', query: {id: id}})
  }
}
const goToJobDetail = (id)=>{
  if(user.value == null){
    ElMessage.warning("请先注册登录！");
  }else{
    // todo 增加一条浏览记录
    axios.post(BASE_URL + "/v1/collect/increaseOneView?recruitId=" + id)
        .then((response)=>{
          if (response.data.code == 2000) {
            console.log("浏览量 + 1")
          } else {
            ElMessage.error(response.data.msg);
          }
        })
    router.push({ path: 'JobDetail', query: { id:id } });
  }
}
// 查询的参数
const searchParam = ref(
    {
      keyword: "",
      internshipMonthDuration: "",
      weekDay: "",
      educationalRequirements: "",
      employmentOpportunities: "",
      recruitmentCity: "",
      corporateLevel: "",
    }
)

const items = ref([])
//定义变量保存分页器的当前页数
let currentPage = ref(1);
//定义变量保存分页器的每页显示多少条
let pageSize = ref(8);
//定义变量保存数据总条目数
let total = ref(8);
// 所在城市
const cities = ref([]);
// 查询招聘信息中包含的城市
const getAllCity = () =>{
  axios.get(BASE_URL + "/v1/Psearch/getAllCity").then((res)=>{
    if (res.data.code === 2000) {
      console.log("查询的城市为 == " )
      console.log( res.data.data )
      cities.value = res.data.data;
    } else {
      message.error("加载失败" + res.data.msg)
    }
  })
}
// 根据条件从后端获取数据总条数
const getRecordCount = () => {
  let data = qs.stringify(searchParam.value)
  axios.get(
      BASE_URL + '/v1/Psearch/selectRecordCount?' + data).then((res) => {
    if (res.data.code === 2000) {
      console.log("查询的条数为 == " + res.data.data)
      total.value = res.data.data;
    } else {
      message.error("加载失败" + res.data.msg)
    }
  });
}
// 加载数据
const loadData = () => {
  // console.log("LoadData执行 当前查询条件searchParam.value === " + searchParam.value);
  getRecordCount();
  // console.log("total === " + total.value)
  //定义变量保存分页器的当前页数 放入查询条件中
  searchParam.value.currentPage = currentPage.value;
  //定义变量保存分页器的每页显示多少条 放入查询条件中
  searchParam.value.pageSize = pageSize.value;
  let data = qs.stringify(searchParam.value)
  //分页条件查询
  axios.get('http://localhost:8080/v1/Psearch/selectAllRecords?' + data).then((res) => {
    if (res.data.code === 2000) {
      // console.log("查询的记录为 == " + res.data.data)
      items.value = res.data.data;
      console.log(items.value)
      for (const element of items.value) {
        if (element.educationalRequirements === '10') {
          element.educationalRequirements = '大专';
        } else if (element.educationalRequirements === '20') {
          element.educationalRequirements = '本科';
        } else if (element.educationalRequirements === '30') {
          element.educationalRequirements = '研究生';
        }
      }
    } else {
      message.error("加载失败" + res.data.msg)
    }
  });
}

//页面变化更新数据
const handleChange = (page) => {
  currentPage.value = page;
}
// 清空所有选项的选择
const clearSelect = () => {
  searchParam.value.keyword = "";
  searchParam.value.internshipMonthDuration = "";
  searchParam.value.weekDay = "";
  searchParam.value.educationalRequirements = "";
  searchParam.value.employmentOpportunities = "";
  searchParam.value.corporateLevel = "";
  searchParam.value.turnOK = "";
  searchParam.value.company = "";
  searchParam.value.recruitmentCity="";
}

const buttonclick = () => {
  alert(searchParam.value.recruitmentCity);
  console.log(searchParam.value.recruitmentCity)
}
// 页面加载时加在数据
onMounted(() => {
  const query = router.currentRoute.value.query;
  searchParam.value.keyword = query.q || ''; // 如果没有q参数，则默认为空字符串
  getAllCity();
  getRecordCount();
  loadData();
  window.scrollTo(0, 0);
})

/**
 * 监听searchParams 变量 改变时触发页面的重新加载
 */
watchEffect(() => {
  loadData();
});

// 单选数据 响应式变量
const month = ref([
  {name: '1个月', value: 1},
  {name: '2个月', value: 2},
  {name: '3个月', value: 3},
  {name: '3-6个月', value: 6},
  {name: '6-12个月', value: 7}
]);

const weekOfDay = ref([
  {name: '一天', value: 1},
  {name: '两天', value: 2},
  {name: '三天', value: 3},
  {name: '四天', value: 4},
  {name: '五天', value: 5},
  {name: '六天', value: 6},
  {name: '七天', value: 7},
])

const education = ref([
  {name: '大专', value: '10'},
  {name: '本科', value: '20'},
  {name: '硕士', value: '30'}
])

const turnOK = ref([
  {name: '提供转正', value: '有'},
  {name: '不提供转正', value: '无'},
  {name: '面议', value: '面议'}
])

const company = ref([
  {name: '已上市', value: '已上市'},
  {name: '世界500强', value: '世界五百强'}
])

</script>


<style scoped>
.right-div-small {
  width: 100%;
  height: 120px;
  margin: 20px 7px;
  border-radius: 10px;
  overflow: hidden;
}

.right-div-little-button {
  margin-top: 18px;
  width: 190px;
  border-radius: 10px;
}

.right-div-big {
  width: 100%;
  height: 170px;
  margin: 20px 7px;
  border-radius: 10px;
  overflow: hidden;
}

.right-div-little {
  width: 100%;
  height: 120px;
  margin: 20px 7px;
  border-radius: 10px;
  text-align: center;
}

.custom-radio-card {
  padding: 10px 16px;
  border: 1px solid var(--color-border-2);
  border-radius: 4px;
  box-sizing: border-box;
}

.custom-radio-card-mask {
  height: 14px;
  width: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  border: 1px solid var(--color-border-2);
  box-sizing: border-box;
}

.custom-radio-card-mask-dot {
  width: 8px;
  height: 8px;
  border-radius: 100%;
}


.custom-radio-card:hover,
.custom-radio-card-checked,
.custom-radio-card:hover .custom-radio-card-mask,
.custom-radio-card-checked .custom-radio-card-mask {
  border-color: rgb(var(--primary-6));
}

.custom-radio-card-checked {
  background-color: var(--color-primary-light-1);
}

.custom-radio-card:hover .custom-radio-card-title,
.custom-radio-card-checked .custom-radio-card-title {
  color: rgb(var(--primary-6));
}

.custom-radio-card-checked .custom-radio-card-mask-dot {
  background-color: rgb(var(--primary-6));
}

.information {
  margin-left: 40px;
  font-size: 15px;
}

.information > span {
  display: inline-block;
  margin-bottom: 10px;
}

.dropdown {
  position: relative;
  display: inline-block;
  margin-left: 40px;
  margin-bottom: 15px;
}

/* 下拉内容（默认隐藏）*/
.dropdown-content {
  display: none;
  outline-style: none;
  border-radius: 10px;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 120px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  font-size: 14px;
  font-family: Microsoft YaHei;
}

/* 下拉列表中的链接 */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* 更改悬停时下拉链接的颜色 */
.dropdown-content a:hover {
  background: linear-gradient(45deg, #a2827f, #855454);
  color: whitesmoke;
  border-radius: 11px;
  transform: scale(1.2); /* （120% 缩放 - 注意：如果缩放太大，它会超出视口） */
}

/* 悬停时显示下拉菜单 */
.dropdown:hover .dropdown-content {
  display: block;
  margin-top: 1px;
}


.choose-city {
  width: 100%;
  height: 35px;
  margin: 10px 40px 5px 40px;
}

.p-top {
  font-size: 18px;
  background-image: linear-gradient(to right, #7167ab, #5d4785);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-weight: bold;
  text-decoration: #6c4295;
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
  margin-top: 10px;
}

.p-top::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px; /* 下划线的高度 */
  background: linear-gradient(to right, #8f85c4, #7156a1); /* 颜色渐变 */
}

.card-demo-right {
  position: relative;
  display: inline-block;
  width: 35%;
  overflow: hidden;
  padding-left: 20px;
  margin-top: 10px;
}

* {
  margin: 0;
  padding: 0;
}

span {
  padding-right: 10px;
}

.main {
  background: linear-gradient(to top, #f3f3f3, #efefff);
  padding-top: 15px;
}

.main-search-body {
  width: 75%;
  margin: 0 auto;

}

.card-demo {
  margin-top: 25px;
  transition-property: all;
  border-radius: 10px;
  transition: 0.5s;
}

.card-demo:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.1);
}

.card-demo-title {
  border-radius: 10px 10px 0 0;
  background: linear-gradient(to right, #cfcfe5, #f7f7fd);
  padding: 10px 25px;
}

.card-demo-title-big {
  display: inline-block;
  font-size: 17px;
  margin-right: 25px;
}


.card-demo-left {
  display: inline-block;
  width: 55%;
  position: relative;
  bottom: 15px;
  padding-left: 23px;
  margin-bottom: 10px;
}

.card-demo-content2 {
  width: 90%;
}

.card-demo-title-detail {
  background-color: rgba(255, 255, 255, 0);
}

.card-demo-content p {
  display: inline-block;
  margin-bottom: 20px;
}

.card-demo-title-money {
  font-size: 18px;
  color: #001ead;
  margin-right: 20px;
  background-color: rgba(255, 255, 255, 0);
}

.card-demo-title-year {
  color: #3f3f3f;
  font-size: 12px;
  margin-right: 10px;
  padding: 4px;
}

.card-demo-title-school {
  color: #3f3f3f;
  font-size: 12px;
  padding: 4px;
}

.little-back {
  padding: 4px;
}

p {
  /*强制文字不换行*/
  white-space: nowrap;
  /*超出的文字部分隐藏*/
  overflow: hidden;
  /*溢出文字部分替换为省略号*/
  text-overflow: ellipsis;
  background-color: rgba(217, 217, 217, 0.38);
}

.arco-input-suffix {
  margin-left: 5px;
}
</style>
